iT邦幫忙

2023 iThome 鐵人賽

DAY 2
0
Modern Web

三十天持續努力挑戰py系列 第 2

Day_2 Web html 初開始 with vscode(上)

  • 分享至 

  • xImage
  •  
  • 今天要介紹的是要怎麼開始寫自己的第一個web,使用的文本編輯器(編譯器)是Visual Studio Code(vscode),目前十分強大的編譯器之一。
  • 在編譯器內部新建一個文件,並將其保存為以'.html'的副檔名檔案,
  • 基本的HTML結構有html、head、body。
<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <!-- 這裡放置網頁內容 -->
</body>
</html>
  • 但我們可以使用vscode的功能,打一個!跑出以下圖片時,直接按下Enter。
    https://ithelp.ithome.com.tw/upload/images/20230913/20162170ssWMa74a0z.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • 這樣可以少輸入很多東西。
  • 主要寫入的內容是在body裡面,語法是:
<p>Lorem, ipsum.</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>Lorem, ipsum.</h2>
    <a href="www.youtube.com">Lorem, ipsum.</a>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7TVwjjjxSYr4-Ibegd4YU-GORlReBpnQej2C5ju8ouA&s" alt="pun">

https://ithelp.ithome.com.tw/upload/images/20230913/20162170A4xBqnwD10.png

  • <p>是一般的文字輸入。<h1>、<h2>是指標題數字越大字體越小。<a>是超連結可以在裡面新增連結。<img>是插入圖片可以找圖片的網址,貼上去即可使用。
    <div style="color: blue;">
        <p>Lorem ipsum dolor sit amet.</p>
        <h2>Lorem, ipsum.</h2>
    </div>
  • <div>是一種容器,可以把它想像成數學式中的括號(),我想要4+2我想要都乘以6,所以變成6x(4+2),html中也是同理,我把裡面字體的顏色都改成藍色。
  • https://ithelp.ithome.com.tw/upload/images/20230913/20162170uytpfAphsQ.png
  • <div>是一個很重要的東西,基本概念不難,但因為可以套很多層所以會很複雜。主要是跟樣式(css)一起使用的,一層包一層位置怎麼擺,顏色怎麼變,都需要花上心思處理。
  • 這邊順便教學樣式(css),一個跟html一起的東西,有html就有css,沒有css的話不如使用記事本就好,基本用法就像上面那樣,直接在後面加上style="",之後裡面打上要更改的屬性,上面那堤就是color的屬性要更改成blue,還有很多屬性能做更改我這邊不多贅述。
  • css還有辦法更好輸入,我放在下篇,以及html裡面也很重要的javascript,也會放在下篇一起講述。

上一篇
Day_1 前言
下一篇
Day_3 github的基礎應用(上)
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言